import variables from '@/styles/variables.scss'
import { ActionTree, Module, MutationTree } from 'vuex'
import { IRootState } from '@/store'
import { CHANGE_SETTING } from '@/store/modules/methods-type'

export interface ISettingsState {
  theme: string,
  originalStyle: string,
  tagsView: boolean,
  sidebarLogo: boolean
}

const state: ISettingsState = {
  theme: variables.theme,
  originalStyle: '',
  tagsView: true,
  sidebarLogo: true
}

/* 动态key的情况下 不同的key用来约束对应的value */
type Valueof<T> = T[keyof T]

interface ISettings {
  key: keyof ISettingsState,
  value: Valueof<ISettingsState>
}

const mutations: MutationTree<ISettingsState> = {
  [CHANGE_SETTING](state, { key, value }: ISettings) {
    if ( key in state ) {
      (state[key] as Valueof<ISettingsState>) = value
    }
  }
}

const actions: ActionTree<ISettingsState, IRootState> = {
  [CHANGE_SETTING]({ commit }, data) {
    commit(CHANGE_SETTING, data)
  }
}

const settings: Module<ISettingsState, IRootState> = {
  namespaced: true,
  state,
  actions,
  mutations
}
export default settings
